﻿<template>
    <!--//私车公用-->
    <div>
        <div class="big_box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
                <el-breadcrumb-item>私车公用</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <el-form class="demo-form-inline" :model="Sel" label-width="140px">
                <el-row :gutter="24" class="row-bg">
                    <el-col :span="3">
                        <el-select placeholder="请选择申请人" filterable clearable v-model="Sel.uId">
                            <el-option :value="0" label="请选择申请人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-col>

                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="Sel.start"
                                        value-format="yyyy-MM-dd"
                                        placeholder="开始日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="Sel.end"
                                        value-format="yyyy-MM-dd"
                                        placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1">
                        <el-button icon="el-icon-search" @click="GettableDB()"></el-button>
                    </el-col>
                    <el-col :span="2.5">
                        <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline" @click="btnAddAddUsageRecord">添加</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="btnDelUsageRecord">批量删除</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-row style="padding-top: 10px">
                <el-col>
                    <el-table :data="tableData"
                              style="width: 100%"
                              ref="multipleTable"
                              @selection-change="selectionLineChangeHandle"
                              border>
                        <el-table-column header-align="center" type="selection" width="50" align="center"></el-table-column>
                        <el-table-column header-align="center" fixed type="index" label="序号" align="center" width="50" :index="_indexMethod"></el-table-column>
                        <el-table-column header-align="center" prop="Date" label="开始日期" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column header-align="center" prop="EndDate" label="结束日期" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column header-align="center" prop="ProjectName" label="用途" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column header-align="center" prop="UserId" label="申请人" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <!--{{scope.row}}-->
                                {{AllTById(AllUsers, scope.row.UserId, 'UserName')}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="Maintenance" label="部门" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                {{MaintenanceTypeFc(scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlateNumber" label="车牌号" width="130" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="Displacement" label="排量" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="Parking" label="过路费/停车费" width="120" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="Strartkilometers" label="开始里程数" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="Endkilometers" label="终止公里数" :show-overflow-tooltip="true" align="center">

                        </el-table-column>
                        <el-table-column header-align="center" prop="AgentId" label="总公里数" width="120" align="center">
                            <template slot-scope="scope">
                                {{Sumkilometers(scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="UnitPrice" label="单价" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                {{UnitPriceFc(scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="AgentId" label="总价" width="120" align="center">
                            <template slot-scope="scope">
                                {{SumPrice(scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="Remarks" label="备注" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="PersonLiableId" label="汽车相册" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <el-button @click="GetImage(scope.row)" type="text" size="small">相册</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="barDemo" label="操作" fixed="right" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" class="BtnSize" size="mini" plain @click="editFc(scope.row)">编辑</el-button>
                                <el-button type="danger" class="BtnSize" size="mini" plain @click="delobj(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24">
                    <div class="block" style="float: right">
                        <el-pagination @size-change="GettableDB"
                                       @current-change="GettableDB"
                                       :current-page.sync="pagination.currentPage"
                                       :page-sizes="pagination.pagesizes"
                                       :page-size.sync="pagination.pagesize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total.sync="pagination.total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>




        <el-dialog :visible.sync="AddPrivateCarUtilityShow" title="添加私车记录" width="70%">
            <AddPrivateCarUtility :AllProject="AllProject">

            </AddPrivateCarUtility>
        </el-dialog>

        <el-dialog :visible.sync="UpPrivateCarUtilityShow" title="修改私车记录" width="70%">
            <UpPrivateCarUtility :AllProject="AllProject"
                                 :UpPrivateCarUtilityDB="UpPrivateCarUtilityDB">
            </UpPrivateCarUtility>
        </el-dialog>

        <el-image-viewer v-if="showViewer"
                         :on-close="()=>{showViewer=false}"
                         :url-list="imgArray" />

    </div>


</template>


<script>
    import * as publicjs from "/public/Scriput/Public"
    import AddPrivateCarUtility from "./AddPrivateCarUtility";
    import UpPrivateCarUtility from "./UpPrivateCarUtility";
    export default {
        name: "PrivateCarUtility",
        components: {
            AddPrivateCarUtility,
            UpPrivateCarUtility,
            'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
        },
        data() {
            return {
                showViewer: false,
                imgArray: false,
                AddPrivateCarUtilityShow: false,
                UpPrivateCarUtilityShow: false,
                Sel: {
                    uId: 0,
                    start: '',
                    end: '',
                },
                AllProject: [],
                AllDepartment: [],
                AllUsers: [],
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                UpPrivateCarUtilityDB: {},
                //批量删除文件
                delidarray: [],

            }
        },
        created() {
            this.AllProject = publicjs.GetAllProject(this.$http);
            this.Init();
            this.GettableDB();
        },
        methods: {
            selectionLineChangeHandle(val) {
                this.delidarray = val;
            },
            async Init() {
                await this.InitFc();
            },
            InitFc() {
                this.AllDepartment = publicjs.GetAllDepartment(this.$http);

                this.AllUsers = this.$store.state.AllUsers;
            },
            GettableDB() {
                let loadding = this.openLoading();
                this.$http.post('/VehicleManagement/GetPrivateCarUtilityDB', {
                    Sel: this.Sel,
                    offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(res => {
                    loadding.close();
                    console.log(res);
                    this.tableData = res.data.data;
                    this.pagination.total = res.data.count;
                });
            },

            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },

            //User表根据id找名称
            AllTById(AllUsers, d, name = null) {
                var result;
                AllUsers.forEach((v, k) => {
                    if (v["Id"] == d) {
                        if (name != null) {
                            result = v[name];
                        } else {
                            result = v;
                        }
                        return false;
                    }
                });
                return result;
            },


            fmtDate(obj) {
                return obj.split(' ')[0];
            },

            btnAddAddUsageRecord() {
                this.AddPrivateCarUtilityShow = true;
            },
            btnDelUsageRecord() {
                this._deleCategory();
            },
            //数据表格信息填写
            _deleCategory() {
                if (this.delidarray.length > 0) {
                    this.$confirm('你确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let arrid = [];
                        for (var i = 0; i < this.delidarray.length; i++) {
                            arrid.push(this.delidarray[i].Id);
                        }
                        let loadding = this.openLoading();
                        this.$http.post('/VehicleManagement/DelPrivateCarUtilityModel', arrid).then(x => {
                            loadding.close();
                            if (x.data.bit) {
                                this.$message.success("删除成功")
                                this.GettableDB();
                            } else {
                                this.$message.error("删除失败")
                            }
                        })

                    })
                } else {
                    this.$message.info("请选择删除目标")
                }
            },

            delobj(obj) {
                this.delidarray = [];
                this.delidarray.push(obj)
                this._deleCategory();
            },

            editFc(obj) {
                this.UpPrivateCarUtilityDB = JSON.parse(JSON.stringify(obj));
                this.UpPrivateCarUtilityShow = true;
            },


            Sumkilometers(d) {
                return this.toDecimal((Number(d.Endkilometers) - Number(d.Strartkilometers)));
            },
            //总价
            SumPrice(d) {
                var num = Number(d.Displacement);
                var kilometers = d.Endkilometers - d.Strartkilometers;
                if (num < 1.8) {
                    return this.toDecimal((0.8 * kilometers));
                } else {
                    return this.toDecimal((1.2 * kilometers));
                }

            },
            toDecimal(x) {
                var f = parseFloat(x);
                if (isNaN(f)) {
                    return;
                }
                f = Math.round(x * 100) / 100;
                return f;
            },

            MaintenanceTypeFc(d) {
                var id = this.AllTById(this.AllUsers, d.UserId, "DepartmentId");//[0]
                var name = this.AllTById(this.AllDepartment, id, "DepartmentName");//[0]
                return name;

            },
            UnitPriceFc(d) {
                var num = Number(d.Displacement);
                if (num < 1.8) {
                    return 0.8
                } else {
                    return 1.2
                }
            },

            async GetImage(obj) {
                this.GetImgPath("64,5," + obj.Id);
            },
            async GetImgPath(path) {
                this.imgArray = [];
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, path);
                console.log(this.imgArray)
                if (this.imgArray.length > 0) {
                    this.showViewer = true;
                } else {
                    this.$message.info("暂未上传图片");
                }

            },



        },

    }
</script>

<style scoped>
</style>